<template>
    <view class="page">
        <view class="titleBox">商家名称：12321321</view>
        <view class="info">
            <view class="title">商家号：</view>
            <view class="name">12321</view>
        </view>
        <view class="info">
            <view class="title">商家密码：</view>
            <view class="name">123456</view>
        </view>
        <view class="info">
            <view class="title">商户号：</view>
            <view class="name">123213213213</view>
        </view>
        <view class="info">
            <view class="title">密钥：</view>
            <view class="name">xsadsadsada</view>
        </view>
        <view class="info">
            <view class="title">私钥：</view>
            <view class="name">12321321312</view>
        </view>
        <view class="info">
            <view class="title">子商户号：</view>
            <view class="name">12321321321312</view>
        </view>
        <view class="info">
            <view class="title">备注：</view>
            <view class="name">123213213213</view>
        </view>
        <view class="info">
            <view class="title">商家创建日期：</view>
            <view class="name"> 12321321312</view>
        </view>
        <view class="to">

            <view class="item">
                <view>修改设备信息</view>
                <view><u-icon name="arrow-right" color="#007aff"></u-icon></view>
            </view>
            <view class="item">
                <view>删除</view>
                <view><u-icon name="arrow-right" color="#007aff"></u-icon></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    watch: {},
    methods: {},
    onShow() { },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.page {
    background-color: #efefef;
    width: 100%;
    min-height: 100vh;
}

.titleBox {
    width: 100%;
    height: 200rpx;
    background-color: $uni-color-primary;
    font-size: 46rpx;
    font-weight: 600;
    text-align: center;
    line-height: 200rpx;
    color: #fff;
}

.tab {
    width: 100%;
    height: 200rpx;
    background-color: #fff;
    display: flex;

    .tab_1 {
        width: 43%;
        background-color: $uni-color-primary;
        height: 140rpx;
        margin: auto;
        border-radius: 20rpx;
        // text-align: center;
        padding-left: 30rpx;
        color: #Fff;

        view:nth-child(1) {
            padding-top: 20rpx;
            font-size: 24rpx;
        }

        view:nth-child(2) {
            padding-top: 10rpx;
            font-size: 24rpx;
        }
    }

    .tab_2 {
        width: 43%;
        background-color: $uni-color-primary;
        height: 140rpx;
        margin: auto;
        border-radius: 20rpx;
        // text-align: center;
        padding-left: 30rpx;
        color: #Fff;

        view:nth-child(1) {
            padding-top: 20rpx;
            font-size: 24rpx;
        }

        view:nth-child(2) {
            padding-top: 10rpx;
            font-size: 24rpx;
        }
    }
}

.info {
    display: flex;
    width: 94%;
    margin: auto;
    height: 80rpx;
    line-height: 80rpx;

    view:nth-child(1) {
        font-size: 30rpx;
        font-weight: 600;
    }

    view:nth-child(2) {
        font-size: 30rpx;
        font-weight: 600;
        padding-left: 10rpx;
    }
}

.to {
    width: 96%;
    background-color: #fff;
    margin: auto;
    margin-top: 30rpx;

    .item {
        display: flex;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #efefef;

        view:nth-child(1) {
            width: 90%;
            padding-left: 30rpx;
            font-size: 28rpx;
            color: #333;
        }

        view:nth-child(2) {
            width: 10%;
            margin-top: 20rpx;
            line-height: 80rpx;
            padding-right: 20rpx;
            // text-align: right;
        }
    }
}
</style>